<template>
    <div id="Baby">
        <Map/>
        <div class="kong"></div>
        <router-link to="/Powdered" class="box">
            <div class="boxContent">
              <img src="../assets/img/线.png" alt="线">
              <span>奶粉专区</span>
              <img src="../assets/img/线.png" alt="线">
            </div>
            <div class="boxCont">
              <img src="../assets/img/妈咪宝贝.png" alt="妈咪宝贝">
            </div>
            <div class="boxCt">
              <div class="boxCon">
                <img src="../assets/img/奶粉.png" alt="奶粉">
                <p class="box-con">不易脱妆口红</p>
                <p class="box-cont">￥59</p>
              </div>
              <div class="boxCon">
                <img src="../assets/img/奶粉.png" alt="奶粉">
                <p class="box-con">花蕊唇彩</p>
                <p class="box-cont">￥129</p>
              </div>
              <div class="boxCon">
                <img src="../assets/img/奶粉.png" alt="奶粉">
                <p class="box-con">娇吻玉口红</p>
                <p class="box-cont">￥88</p>
              </div>
            </div>
        </router-link>
          <div class="kong"></div>
        <div class="box">
            <div class="boxContent">
              <img src="../assets/img/线.png" alt="线">
              <span>纸尿裤专区</span>
              <img src="../assets/img/线.png" alt="线">
            </div>
            <div class="boxCont">
              <img src="../assets/img/纸尿裤专区.png" alt="纸尿裤专区">
            </div>
            <div class="boxCt">
              <div class="boxCon">
                <img src="../assets/img/纸尿裤.png" alt="纸尿裤">
                <p class="box-con">不易脱妆口红</p>
                <p class="box-cont">￥59</p>
              </div>
              <div class="boxCon">
                <img src="../assets/img/纸尿裤.png" alt="纸尿裤">
                <p class="box-con">花蕊唇彩</p>
                <p class="box-cont">￥129</p>
              </div>
              <div class="boxCon">
                <img src="../assets/img/纸尿裤.png" alt="纸尿裤">
                <p class="box-con">娇吻玉口红</p>
                <p class="box-cont">￥88</p>
              </div>
            </div>
          </div>
          <div class="kong"></div>
        <div class="box1">
            <div class="boxContent">
              <img src="../assets/img/线.png" alt="线">
              <span>猜你喜欢</span>
              <img src="../assets/img/线.png" alt="线">
            </div>
            <div v-for="(it,i) in array" v-bind:key="i">
                <div  class="box-min">
                    <img class="urlImg" :src="it.urlimg" alt="爆品" >
                    <div class="name">{{it.name}}</div>
                    <div class="txt">{{it.text}}</div>
                 </div>
            </div>
            <div class="footer">加载更多</div>
        </div>
    </div>
</template>
<script>
import Map from './Map';
export default {
    name:'Baby',
    data() {
        return {
             array:[
               {
                   urlimg:require("../assets/img/蓝莓果汁.png"),
                   name:'野生蓝莓果汁饮料',
                   text:'￥100'
               },
               {
                   urlimg:require("../assets/img/坚果.png"),
                   name:'原味坚果',
                   text:'￥100'
               },
             ]
        }
    },
    components:{
        Map,
    }
}
</script>
<style scoped>
#Baby{
   background-color: #fff;
}
.kong{
    width: 100%;
    height: 0.2rem;
    background-color: #f2f2f2;
}
.box{
  display: block;
    width: 100%;
    height: 6.5rem;
}
.boxContent{
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
}
.boxContent>img{
  width:0.3rem ;
  height: 0.3rem;
  margin: 0.15rem 0.2rem;
  vertical-align: top;
}
.boxContent>span{
  width:1.2rem ;
  height: 0.3rem;
  font-size: 0.3rem;
    vertical-align: top;
   color: #4d4d4d;
}
.boxCont{
    width: 100%;
    height: 3rem;
    text-align: center;
}
.boxCont>img{
    width: 6.6rem;
    height: 3rem;
    border: solid 1px #ccc;
}
.boxCt{
  width: 100%;
  height: 1.9rem;
  display: flex;
  justify-content: space-between;
}
.boxCon{
  width: 100%;
  height: 2.75rem;
  text-align: center;
}
.boxCon>img{
  width: 2.3rem;
  height: 1.6rem;
  margin-top: 0.15rem;
}
.boxCon:nth-child(2) img{
  width: 2.28rem;
  height: 1.6rem;
  border-left: 0.01rem solid #ccc;
  border-right: 0.01rem solid #ccc;
}
.box-con{
  font-size: 0.24rem;
  margin: 0.08rem 0;
}
.box-cont{
  font-size: 0.24rem;
  color: #e83d41;
} 
 .box1{
       width: 100%;
       height: 3.4rem;
       display: flex;
       justify-content: space-evenly;
       flex-wrap: wrap;
   }
   .box-min{
       width: 3.3rem;
       text-align: center;
       border: solid 0.01rem #ccc;
       display: flex;
       flex-direction: column;
       justify-content: center;
       position: relative;
   }
   .hot{
       display: block;
       width: 0.25rem;
       height: 0.5rem;
       font-size: 0.23rem;
       position: absolute;
       left: 0.06rem;
       top: -0.02rem;
       bottom: 2.4rem;
       right: 3.1rem;
       color: #fff;
   }
   .urlImg{
       width: 3.3rem;
       height: 2rem;
       vertical-align: top;
   }
   .name{
       width: 100%;
       height: 0.45rem;
       line-height: 0.45rem;
       font-size: 0.24rem;
       text-align: center;
   }
   .txt{
       font-size: 0.24rem;
       color: #e53e42;
   }
   .foot{
       width: 100%;
       height: 1.3rem;
       text-align: center;
       font-size: 0.18rem;      
       background-color: #f2f2f2;
       color: #808080; 
   }
   .footer{
       width: 100%;
       height: 1.95rem;
       font-size: 0.18rem;
       text-align: center;
       margin-top: 0.6rem;
   }
</style>